<template>
  <n-config-provider
    :locale="zhCN"
    :date-locale="dateZhCN"
    style="height: 100vh"
  >
    <n-loading-bar-provider
      :loading-bar-style="{
        loading: 'height:.3em',
        error: 'height:.3em',
      }"
    >
      <n-dialog-provider>
        <n-notification-provider>
          <n-message-provider>
            <router-view
              style="
                width: inherit;
                height: inherit;
                min-width: inherit;
                min-height: inherit;
              "
            />
            <NaiveProviderContent />
          </n-message-provider>
        </n-notification-provider>
      </n-dialog-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>
<script setup lang="ts">
/**
 *
 */
import { h, onMounted, defineComponent } from "vue";
/**
 *
 */
import * as echarts from "echarts";
/**
 * 入口UI
 */
import {
  zhCN,
  dateZhCN,
  NConfigProvider,
  NDialogProvider,
  NLoadingBarProvider,
  NNotificationProvider,
  NMessageProvider,
  useLoadingBar,
  useDialog,
  useMessage,
  useNotification,
  darkTheme,
} from "naive-ui";
/**
 *
 */
import { useRouter } from "vue-router";
/**
 * 生命周期
 */
onMounted(async () => {
  /**
   * 生命周期
   */
});
const NaiveProviderContent = defineComponent({
  setup() {
    setupNaiveTools();
  },
  render() {
    return h("div");
  },
});

/**
 * 挂载naive组件的方法至window, 以便在全局使用
 */
function setupNaiveTools() {
  window.$loading = useLoadingBar();
  window.$message = useMessage();
  window.$dialog = useDialog();
  window.$router = useRouter();
  window.$echarts = echarts;
}
</script>

<style lang="scss"></style>
